<template>
  <div class="tableWrapper">
    <el-table
      :data="tableData"
      stripe
      size="small"
      :max-height="tableHeight"
      style="width: 100%">
      <el-table-column prop="index" label="No" type="index" :index="indexMethod"></el-table-column>
      <el-table-column prop="deviceTime" label="时间"></el-table-column>
      <el-table-column prop="pm25Value" label="PM2.5 (μg/m³)"></el-table-column>
      <el-table-column prop="pm10Value" label="PM10 (μg/m³)"></el-table-column>
      <el-table-column prop="noiseValue" label="噪声 (dB)"></el-table-column>
      <el-table-column prop="temValue" label="温度 (℃)"></el-table-column>
      <el-table-column prop="humidityValue" label="湿度 (% RH)"></el-table-column>
      <el-table-column prop="windSpeedValue" label="风速 (m/s)"></el-table-column>
      <el-table-column prop="airPressureValue" label="大气压 (hPa)"></el-table-column>
    </el-table>

<!--    <div class="page_top" >-->
<!--      <el-pagination-->
<!--        background-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        layout="total, prev, pager, next, sizes"-->
<!--        :current-page.sync="pageData.pageNum"-->
<!--        :page-size="pageData.pageSize"-->
<!--        :total="pageData.total">-->
<!--      </el-pagination>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "TableWrap",
  data() {
    return {
      tableData: [],
      tableHeight: 0,
      pageData: {
        pageNum: 0,
        pageSize: 20,
        total: 0,
      },
    }
  },

  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 425;
  },

  methods: {
    indexMethod(index) {
      return index + 1
    },

    showList(data) {
      this.tableData = data;
      this.pageData.total = data.length;
    },

    handleSizeChange(val) {
      this.pageData.pageSize = val;
    },

    handleCurrentChange(val) {
      this.pageData.pageNum = val;
    },
  }
}
</script>

<style scoped>
.tableWrapper {
  padding: 10px 20px;
}

.page_top {
  margin: 20px 0;
  text-align: right;
}
</style>
